<template>
  <div>
    <schedule />
    <div class="message">
      <div class="container">
        <h2 class="pub_title">我的消息</h2>
        <div class="message_list">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
              <template #title>
                <div class="mes_box">
                  <h3 class="m_title">
                    咨询回复｜消息主题消息主题消息主题消息主题
                  </h3>
                  <div class="m_time">2021-12-07</div>
                </div>
              </template>
              <div class="mes_body">
                <p><b>发件人：</b>FMBA办公室</p>
                <p><b>日&nbsp;&nbsp;&nbsp;期：</b>2021年12月07日 11:12</p>
                <p>
                  <b>内&nbsp;&nbsp;&nbsp;容：</b
                  >您好！欢迎您注册中欧金融MBA报名服务中心
                </p>
                <p>
                  <b></b
                  >如有任何问题，请Email:fmba@ceibs.edu，或致电8621-28905288
                </p>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template #title>
                <div class="mes_box">
                  <h3 class="m_title">
                    咨询回复｜消息主题消息主题消息主题消息主题
                  </h3>
                  <div class="m_time">2021-12-07</div>
                </div>
              </template>
              <div class="mes_body">
                <p><b>发件人：</b>FMBA办公室</p>
                <p><b>日&nbsp;&nbsp;&nbsp;期：</b>2021年12月07日 11:12</p>
                <p>
                  <b>内&nbsp;&nbsp;&nbsp;容：</b
                  >您好！欢迎您注册中欧金融MBA报名服务中心
                </p>
                <p>
                  <b></b
                  >如有任何问题，请Email:fmba@ceibs.edu，或致电8621-28905288
                </p>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3" class="readed">
              <template #title>
                <div class="mes_box">
                  <h3 class="m_title">
                    咨询回复｜消息主题消息主题消息主题消息主题
                  </h3>
                  <div class="m_time">2021-12-07</div>
                </div>
              </template>
              <div class="mes_body">
                <p><b>发件人：</b>FMBA办公室</p>
                <p><b>日&nbsp;&nbsp;&nbsp;期：</b>2021年12月07日 11:12</p>
                <p>
                  <b>内&nbsp;&nbsp;&nbsp;容：</b
                  >您好！欢迎您注册中欧金融MBA报名服务中心
                </p>
                <p>
                  <b></b
                  >如有任何问题，请Email:fmba@ceibs.edu，或致电8621-28905288
                </p>
              </div>
            </el-collapse-item>
            <el-collapse-item name="4" class="readed">
              <template #title>
                <div class="mes_box">
                  <h3 class="m_title">
                    咨询回复｜消息主题消息主题消息主题消息主题
                  </h3>
                  <div class="m_time">2021-12-07</div>
                </div>
              </template>
              <div class="mes_body">
                <p><b>发件人：</b>FMBA办公室</p>
                <p><b>日&nbsp;&nbsp;&nbsp;期：</b>2021年12月07日 11:12</p>
                <p>
                  <b>内&nbsp;&nbsp;&nbsp;容：</b
                  >您好！欢迎您注册中欧金融MBA报名服务中心
                </p>
                <p>
                  <b></b
                  >如有任何问题，请Email:fmba@ceibs.edu，或致电8621-28905288
                </p>
              </div>
            </el-collapse-item>
            <el-collapse-item name="5">
              <template #title>
                <div class="mes_box">
                  <h3 class="m_title">
                    咨询回复｜消息主题消息主题消息主题消息主题
                  </h3>
                  <div class="m_time">2021-12-07</div>
                </div>
              </template>
              <div class="mes_body">
                <p><b>发件人：</b>FMBA办公室</p>
                <p><b>日&nbsp;&nbsp;&nbsp;期：</b>2021年12月07日 11:12</p>
                <p>
                  <b>内&nbsp;&nbsp;&nbsp;容：</b
                  >您好！欢迎您注册中欧金融MBA报名服务中心
                </p>
                <p>
                  <b></b
                  >如有任何问题，请Email:fmba@ceibs.edu，或致电8621-28905288
                </p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import schedule from "@/components/schedule/schedule.vue";
import src1 from "../../assets/images/person_img01.png";
export default {
  name: "my",
  components: { schedule },
  props: {},
  data() {
    return {
      src1: src1,
      show: false,
      activeNames: 1,
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
// message
.message {
  padding: 4% 0;
}

.message_list {
  margin-top: 50px;
  background: #fff;

  .el-collapse-item {
    padding: 0 5%;
    color: #003963;

    ::v-deep .el-collapse-item__header {
      padding: 3% 0;
      border-bottom: 1px solid #003963;
      color: #003963;

      &.is-active {
        border-bottom: 1px solid #ebeef5;
      }
    }

    ::v-deep .el-collapse-item__wrap {
      border-bottom: 1px solid #003963;
    }

    ::v-deep .el-icon {
      font-weight: bold;
      font-size: 20px;
    }

    &.readed {
      .mes_box,
      ::v-deep .el-icon {
        color: #9c9c9c;
      }
    }

    .mes_box {
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      width: 100%;

      .m_title {
        font-size: 18px;
        font-weight: 400;
      }

      .m_time {
        text-align: right;
        padding-right: 5px;
        font-size: 16px;

        em {
          margin-left: 10px;
        }
      }
    }

    .mes_body {
      line-height: 36px;
      font-size: 16px;
      padding-top: 20px;
      color: #5a5a5a;

      p {
        display: flex;

        b {
          color: #000;
          display: block;
          width: 64px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .message {
    .pub_title {
      text-align: center;
    }
  }

  .message_list {
    margin-top: 8%;

    .el-collapse-item {
      padding: 0 15px;

      ::v-deep .el-collapse-item__header {
        padding: 5% 0;
      }

      .mes_box {
        display: inline-block;
        line-height: 20px;
        overflow: hidden;

        .m_title {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
